iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0
JavaScript

入門JavaScript系列 第 29

JavaScript與HTML(2)

  • 分享至 

  • xImage
  •  

JavaScript 與 HTML 的進階應用包括動態操作網頁內容、更複雜的事件處理、表單驗證、使用模板引擎來生成 HTML、AJAX 請求與資料處理、以及整合外部庫和框架來擴展功能。這些技術讓開發者能夠開發更加互動性高、響應迅速的網頁應用程序。

1. 動態修改與生成 HTML 結構

除了基本的 DOM 操作,進階的應用包括更靈活和更大範圍的動態結構生成與更新。這在構建大型動態網頁或 SPA(單頁應用程序)中尤為重要。

範例:動態生成複雜的表格

在使用者提交資料後動態生成一個帶有行列數據的表格。

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Table Example</title>
</head>
<body>
  <button onclick="generateTable()">Generate Table</button>
  <div id="tableContainer"></div>

  <script>
    function generateTable() {
      const data = [
        ['Name', 'Age', 'Country'],
        ['Alice', '24', 'USA'],
        ['Bob', '29', 'UK'],
        ['Charlie', '35', 'Canada']
      ];
      
      const table = document.createElement('table');
      table.border = '1';

      data.forEach(rowData => {
        const row = document.createElement('tr');
        rowData.forEach(cellData => {
          const cell = document.createElement('td');
          cell.textContent = cellData;
          row.appendChild(cell);
        });
        table.appendChild(row);
      });

      document.getElementById('tableContainer').appendChild(table);
    }
  </script>
</body>
</html>

這個範例根據一個數據陣列,動態生成了一個表格,並且插入到頁面中。這在需要處理大量數據或從伺服器獲取動態數據時特別有用。

2. 高效事件處理與事件委派

在大型應用中,對於動態生成的元素,必須使用事件委派來避免給每個新生成的元素添加單獨的事件監聽器。事件委派能夠提高性能,特別是當你有大量 DOM 元素時。

範例:使用事件委派處理動態按鈕

<!DOCTYPE html>
<html>
<head>
  <title>Event Delegation Example</title>
</head>
<body>
  <div id="buttonContainer"></div>
  <button onclick="addButton()">Add Button</button>

  <script>
    // 事件委派:監聽父元素的點擊事件
    document.getElementById('buttonContainer').addEventListener('click', function(event) {
      if (event.target && event.target.matches('button')) {
        alert(`Button ${event.target.textContent} clicked`);
      }
    });

    function addButton() {
      const newButton = document.createElement('button');
      newButton.textContent = `Button ${document.querySelectorAll('#buttonContainer button').length + 1}`;
      document.getElementById('buttonContainer').appendChild(newButton);
    }
  </script>
</body>
</html>

在這個例子中,我們使用事件委派來監聽父容器的點擊事件,而不是對每個按鈕單獨添加事件監聽器。這樣即使生成更多按鈕也不會影響性能。

3. 表單驗證與動態錯誤提示

使用 JavaScript 可以進行進階的表單驗證,包括即時的輸入檢查和動態錯誤提示。

範例:進階表單驗證

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation Example</title>
</head>
<body>
  <form id="myForm">
    <label for="email">Email:</label>
    <input type="text" id="email">
    <span id="emailError" style="color:red; display:none;">Invalid email format</span><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password">
    <span id="passwordError" style="color:red; display:none;">Password must be at least 6 characters long</span><br><br>

    <button type="submit">Submit</button>
  </form>

  <script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;

      let isValid = true;

      // Email validation
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(email)) {
        document.getElementById('emailError').style.display = 'inline';
        isValid = false;
      } else {
        document.getElementById('emailError').style.display = 'none';
      }

      // Password validation
      if (password.length < 6) {
        document.getElementById('passwordError').style.display = 'inline';
        isValid = false;
      } else {
        document.getElementById('passwordError').style.display = 'none';
      }

      if (isValid) {
        alert('Form submitted successfully!');
      }
    });
  </script>
</body>
</html>

這個範例展示了如何即時驗證電子郵件和密碼,並動態顯示錯誤訊息。表單驗證是在網頁應用中確保資料正確性的關鍵。

4. AJAX 與動態內容更新

進階的 AJAX 應用允許你動態從伺服器獲取數據並更新網頁內容,而無需重新加載整個頁面。

範例:AJAX 獲取動態數據並更新內容

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Example</title>
</head>
<body>
  <button onclick="fetchData()">Fetch Data</button>
  <div id="output"></div>

  <script>
    function fetchData() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
      xhr.onload = function() {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          document.getElementById('output').innerHTML = `<h3>${data.title}</h3><p>${data.body}</p>`;
        }
      };
      xhr.send();
    }
  </script>
</body>
</html>

這個範例透過 AJAX 向伺服器請求數據,然後動態更新網頁內容。使用 XMLHttpRequestfetch API 可以處理這樣的異步請求。

5. 使用模板引擎生成動態 HTML

在應用程序中,需要動態生成大量 HTML 結構時,手動生成可能變得繁瑣且難以維護。這時,模板引擎(如 Handlebars、Mustache)可以幫助簡化代碼。

範例:使用 Handlebars.js 模板引擎生成 HTML

<!DOCTYPE html>
<html>
<head>
  <title>Template Engine Example</title>
  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>
<body>
  <div id="output"></div>

  <script id="entry-template" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
    <p>{{body}}</p>
  </script>

  <script>
    const source = document.getElementById('entry-template').innerHTML;
    const template = Handlebars.compile(source);

    const context = {
      title: "Dynamic Title",
      body: "This is the body of the content."
    };

    const html = template(context);
    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

在這裡,我們使用 Handlebars.js 來將數據插入模板中,並生成動態 HTML 結構。這種方法在大型應用中非常有用,特別是當你需要反覆生成相似的結構時。

6. 整合外部庫和框架

現代網頁開發中,使用 JavaScript 外部庫或框架來擴展功能已成為常態。框架如 React、Vue.js 或 Angular 能夠進一步抽象 HTML 與 JavaScript 的結合,提供更加結構化的開發方式。

範例:React 中動態生成列表

class ItemList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ['Item

 1', 'Item 2', 'Item 3'] };
  }

  addItem = () => {
    this.setState(prevState => ({
      items: [...prevState.items, `Item ${prevState.items.length + 1}`]
    }));
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button onClick={this.addItem}>Add Item</button>
      </div>
    );
  }
}

ReactDOM.render(<ItemList />, document.getElementById('root'));

React 提供了更結構化的方式來處理動態內容和狀態更新,能夠更高效地管理 DOM 的更新。

總結

JavaScript 與 HTML 的進階應用讓開發者能夠創建動態、可互動、可擴展的網頁應用程序。透過事件委派、動態 DOM 操作、AJAX、模板引擎以及外部框架,你可以處理複雜的用戶交互場景,並提高應用程序的靈活性與性能。


上一篇
JavaScript與HTML(1)
下一篇
leetcode實作---42.蒐集雨水
系列文
入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言